<template>
  <ElDrawer v-model="visible">
    <ElForm label-width="auto">
      <ElFormItem label="title">
        <ElInput v-model="animation.title"></ElInput>
      </ElFormItem>
      <ElFormItem label="price">
        <ElInputNumber v-model="animation.price"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="kucun">
        <ElInputNumber v-model="animation.quantity"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="upload cover">
        <!-- elupload v-model :list file  :list-file="filesToUpload" -->
        <ElUpload ref="upload"
          v-model:file-list="filesToUpload"
          :on-change="onChange"
          :on-exceed="onExceed"
          :on-remove="onRemove"
          :limit="1"
          :auto-upload="false"
        >
          <!-- <ElButton>choose file ....</ElButton> -->
          <template #trigger>
            <ElButton type="primary">select file</ElButton>
          </template>
        </ElUpload>
      </ElFormItem>
      <ElButton type="primary" @click="insert()">submit </ElButton>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import { Animation } from '@/entity/animation.entity'
export default defineComponent({
  name: 'PracFiveInsert',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      visible: false,
      animation: {
        title: 'super hero',
        price: 10.0,
        quantity: 2,

        aniCode: '',
        cover: ''
      } as Animation,
      filesToUpload: []
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    show() {
      this.visible = true
    },
    onChange(file: any, files: Array<any>) {
      console.log(file, files)
      console.log('--------- on change ------')
      // this.filesToUpload.push(file)
      // this.filesToUpload = files
      // console.log(this.filesToUpload)

    },
    onExceed(file: Array<any>, b: any) {
      console.log(file, b)
      console.log('--------- on exceed ------')
      const upload:any = this.$refs.upload
      upload.clearFiles()
      file[0].uid= new Date().getTime()
      // file[0].uid = genFileId()
      upload.handleStart(file[0]);
    },
    onRemove(a: any, b: any) {
      console.log(a, b)
      console.log('--------- on remove ------')
    },
    async insert() {
      // step1 prepare data;
      const formData = new FormData()
      formData.append('aniCode', this.animation.aniCode)
      formData.append('title', this.animation.title)
      formData.append('price', this.animation.price.toString())
      formData.append('quantity', this.animation.quantity.toString())
      formData.append('cover', this.animation.cover)
      let pic = null
      if (this.filesToUpload.length > 0) {
        pic = this.filesToUpload[0].raw
        console.log(pic)
      }
      //   add file
      formData.append('picCover', pic)
      //   formData
      // step2 axios
      //  json  => multipart/form-data
      await axios({
        url: '/animation/insert',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }
  },
  watch: {
    // sampleP(n, o) {},
    filesToUpload: {
      handler: function (n, o) {
        console.log('本地待上传的文件组发生变化，最新是', n)
      },
      deep: true
    }
    // filesToUpload(n, o) {
    //   console.log('本地待上传的文件组发生变化，最新是', n)
    // }
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
